import React, { memo, useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Button, Avatar, Input, Dropdown } from 'antd'

import Logo from '../../assets/logo.png'
import './css/header.css'
import { UserOutlined, LogoutOutlined } from '@ant-design/icons'
import { useSelector } from 'react-redux'

const { Search } = Input;


const header = memo(() => {
  const [isLogin] = useState(true)
  const location = useLocation()
  const navigate = useNavigate()
  const onHome = (n) => {
 
      let params={
        page:1,
        pagesize:10,
        state:null,
        category:n,
        searchKey:instxt
      }
      localStorage.removeItem('params')
      localStorage.setItem('params',JSON.stringify(params))
   
      setTabnum(n)
      navigate('/home/article')
   
  }
  const onLogin = () => {
    navigate('/login')
  }
  const [instxt,setInstxt]=useState('')
  const [tabnum,setTabnum]=useState(1)
  const onSearch = function(e){
    console.log(e)
  
    let params={
      page:1,
      pagesize:10,
      state:null,
      category:tabnum,
      searchKey:e
    }
    localStorage.removeItem('params')
    localStorage.setItem('params',JSON.stringify(params))
   
    setInstxt(e)
    navigate('/home/article')
  }
  const items = [
    {
      key: 'profile',
      label: '个人中心',
      icon: <UserOutlined />,
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,

    },
  ];
  const onClick = ({ key }) => {
    if (key == 'profile') {
      navigate('/home/profile')
    }
    if (key == 'logout') {
      onLogin()
    }
  }
  const profile = useSelector(state => state.profile)
  useEffect(() => {
  })
  
  return (
    <div className='headerStyle'>
      <div className='navbar'>
        <div className='logo'>
          <img width={'32px'} src={Logo} alt='' />
          <div>BLOG</div>
        </div>
        <div onClick={() => onHome(1)} className={`item ${tabnum==1? 'active' : ''}`}>
        {location.pathname === '/home/article' ? '生活' : ''}
        </div>
        <div onClick={() => onHome(2)} className={`item ${tabnum==2? 'active' : ''}`}>{location.pathname === '/home/article' ? '个人' : ''}</div>
        <div onClick={() => onHome(3)} className={`item ${tabnum==3? 'active' : ''}`}>{location.pathname === '/home/article' ? '系统' : ''}</div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {location.pathname === '/home/article' ?
            <Search
              placeholder="请输入内容..."
              allowClear
              onSearch={onSearch}
            />
            : ''
          }

        </div>

      </div>
      <div className='nav-profile'>
        {/* <div onClick={() => onProfile()} className={`profile ${location.pathname === '/home/profile' ? 'active' : ''}`}>
          个人中心
        </div> */}
        <div>
          {
            isLogin ?
              <Dropdown
                menu={{
                  items,
                  onClick
                }}
                placement="bottom"
                arrow
                size='large'
              >

                <Avatar style={{ position: 'relative', top: '-2px', cursor: 'pointer' }} src={profile.profile.result?.avatar} />
              </Dropdown>
              :
              <Button onClick={() => onLogin()} type='primary'>登录/注册</Button>
          }
        </div>
      </div>
    </div>
  )
})

export default header
